<template>
  <div class="archive">
    <el-container :style="'min-height:'+minHeight">
      <el-aside class="me-area">
        <ul class="me-month-list">
          <li v-for="(item,index) in archives" :key="index" class="me-month-item">
            <el-badge :value="item.count">
              <el-button @click="changeArchive(item.year, item.month)" size="small">{{item.year +'年' + item.month + '月'}}
              </el-button>
            </el-badge>
          </li>
        </ul>
      </el-aside>

      <el-main class="me-articles">
        <div class="me-month-title">{{currentArchive}}</div>
        <article-scroll-page v-bind="params"></article-scroll-page>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'
import {getArchive} from '@/api/article';
let _this;
export default {
  name: 'Archive',
  components:{
    ArticleScrollPage
  },
  data () {
    return {
      params: {
        query: {
          month: this.$route.params.month,
          year: this.$route.params.year
        }
      },
      archives:[],
      minHeight:0,
    }
  },
  watch: {
    '$route'() {
      if (this.$route.params.year && this.$route.params.month) {
        this.params.query.year = this.$route.params.year
        this.params.query.month = this.$route.params.month
      }
    }
  },
  computed: {
    title (){
      return this.currentArchive + ' - 文章归档 - For Fun'
    },
    currentArchive (){
      if(this.params.query.year && this.params.query.month){
        return `${this.params.query.year}年${this.params.query.month}月`
      }
      return '全部'
    }
  },
  created() {
    _this = this;
    _this.listArchives()
    _this.minHeight = "620px";
  },
  methods: {
    changeArchive(year, month) {
      _this.$router.push({path: `/archives/${year}/${month}`})
    },
    listArchives() {
      getArchive().then((res => {
        _this.archives = res.data
      })).catch(error => {
        _this.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.archive
  width 65%
  .el-aside
    padding  20px 0
    margin 20px 0
    background-color #ffffff
    position fixed
    width 150px !important
    .me-month-list 
      margin-top 10px
      margin-bottom 10px
      text-align center
      list-style-type none
      .me-month-item 
        margin-top 18px
        padding 4px
        font-size 18px
        color #5FB878
  .el-main
    margin-left 20%
    .me-month-title 
      margin-left 4px
      margin-bottom 12px
</style>
